<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- audio 属性 表示音频一旦就绪，就会马上自动播放
    controls 此属性表示规定浏览器应该为音频提高播放控件，如果设置了该属性则规定不存在作者设置的脚本空间
浏览器包含以下几种。。
播放 暂停 定位 音量 全屏切换 字母(如果可用)，音轨(如果可用) -->
    <audio src="./music/m.aac" id="music"autoplay controls></audio>
    <video src="./video/video/14875067-1.mp4" autoplay controls id="media" width="800" height="300"></video>
    <button onclick="changeVideo(event)" data-url="./video/video/14875067-1.mp4">视频1</button>
    <button onclick="changeVideo(event)" data-url="http://dw-w6.dwstatic.com/55/2/1631/2886699-100-1470394342.mp4">视频2</button>
    <button onclick="changeVideo(event)" data-url="http://mvvideo11.meitudata.com/5851461517c285401.mp4">视频3</button>
    <button onclick="audioPause(event)">暂停</button>
    <button onclick="audioPlay(event)">播放</button>

    <img src="./imgs/dfdc0e92d6fa3ec7c1b8575fe0b3a361.jpg" alt="">
    <img src="./imgs/e9f14996f144652111d83e96a1a2ebd2.jpg" alt="">
    <img src="./imgs/ef2de2b5eb1fe6858b0967f5070ff9e0.jpg" alt="">
    <script src="js/jquery-3.2.1.js"></script>
    <script>
    //获取音频标签
    var audio = document.getElementById('music')
    function audioPause(e){
        audio.pause()
    }
    function audioPlay(e){
        audio.play()
    }

    //获取视频标签
    var video = document.getElementById('media');

    function changeVideo(e){
        var tag = e.currentTarget;
        video.src = tag.dataset.url
    }
    //window.onload 表示在页面中所有的标签和资源加载完毕之后执行里面的内容
    window.onload = function(){
        var images = document.querySelectorAll('img')
        console.log('window onload 执行了')
        console.log(images)
    }
    
    //$(function(){}) 表示页面中所有的标签和资源加载完毕之后执行
    // $(document).ready(function(){}) 同上、简写
    //在实际开发中如果是用来jquery插件建议把js代码写在(function(){}) 里面，以防页面中的标签没有加载完成。
    //一个页面中可以有多个$(function(){})方法，他们之间互不影响。
    $(function(){
        console.log('加载完毕')
        var images = document.querySelectorAll('img')
        console.log(images)
    }) 
    $(document).ready(function(){
        console.log('页面中的标签加载完毕')
    })
    $(function(){
        console.log('页面中的标签加载完毕')
        
    }) 

    </script>
</body>
</html>